<template>
    <div id="login">
        <div class="header_title">
            <el-page-header @back="goBack" content="登录">
            </el-page-header>
        </div>
        <div class="con">
            <h4>用户名</h4>
            <el-input v-model="username" placeholder="请输入内容" @keyup.enter.native="onLogin"></el-input>
            <h4>密码</h4>
            <el-input v-model="password" placeholder="请输入密码" @keyup.enter.native="onLogin" show-password></el-input>
            <el-button class="submit" @click="onLogin">登录</el-button>
        </div>
    </div>
</template>
<script>
    import { Message } from 'element-ui'
    import { mapActions } from 'vuex'
    export default{
        data () {
            return {
                username:'',
                password:''
            }
        },
        mounted(){
            document.body.scrollTop = 0;
            document.documentElement.scrollTop = 0;
        },
        methods:{
            ...mapActions(['login']),
            onLogin(){
                this.login({username:this.username,password:this.password})
                .then(()=>{
                    Message.success('登录成功')
                    this.$router.push({path:'/'})
                })
            },
            goBack() {
                this.$router.push({path:'/'})
            } 
           
        }
    }
</script>
<style src="./login.less" lang="less"></style>
